<template>
	<up-sticky>
		<view class="fixed-top">
			<view class="top flex items-center" :style="[{ 'padding-top': topH + 'px', 'padding-right': searchr + 'px' }]">
				<up-icon name="arrow-left" color="#000" size="23" @click="goBack"></up-icon>
				<view class="search flex items-center justify-between flex-1">
					<image src="/static/product/ic_searchgray.png" class="s-icon"></image>

					<input type="text" placeholder="搜索您心仪的商品" class="inp flex-1" placeholder-class="inp-place" v-model="keyword" @blur="searchBlur"/>

					<view class="flex items-center justify-center" v-if="condition.keyword" @click="closeSearch()">
						<image src="/static/product/ic_ssjgdelet@2x.png" class="close-icon"></image>
					</view>
					<view class="search-icon" @click="search()">搜索</view>
				</view>
			</view>

			<view class="fill">
				<view class="sort-type flex items-center justify-between">
					<view :class="{ active: condition.filed == item.type }" class="item" @click="changeTab(item, index)" v-for="(item, index) in tab">
						<text>{{ item.title }}</text>
						<image v-if="item.icons != ''" :src="'/static/product/' + item.icons[item.val].icon" class="icon"></image>
					</view>
				</view>
			</view>
		</view>
	</up-sticky>
	<Porduct v-model="condition" ref="productRef" />
</template>

<script setup>
	import { ref, inject } from 'vue';
	import { port, imgUrl, goUrl, hint, goBack } from '/service/port';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
	import Porduct from '/components/Product.vue';

	const sortKey = ref('');
	const sortVal = ref('');
	const keyword = ref('');
	const cate_1 = ref('');
	const cate_2 = ref('');

	const condition = ref({
		keyword: '',
		cate_1: '',
		cate_2: '',
		sort: '',
		filed: '',
		new: '',
		type_id: ''
	});

	const tab = ref([
		{ title: '综合', type: '', icons: '' },
		{
			title: '销量',
			type: 'sales',
			icons: {
				def: { icon: 'ic_jgsshui@2x.png' },
				asc: { icon: 'ic_jgssup@2x.png' },
				desc: { icon: 'ic_jgssdown@2x.png' }
			},
			val: 'def'
		},
		{
			title: '价格',
			type: 'vip_price',
			icons: {
				def: { icon: 'ic_jgsshui@2x.png' },
				asc: { icon: 'ic_jgssup@2x.png' },
				desc: { icon: 'ic_jgssdown@2x.png' }
			},
			val: 'def'
		}
		// { title: '上新', type: 'new', icons: '' }
	]);
	
	const searchBlur = ()=>{
		condition.value.keyword = keyword.value
	}
	
	onLoad((e) => {
		if(e.keyword){
			keyword.value = e.keyword;
		}
		condition.value = {
			...e
		};
	});
	const productRef = ref(null);
	const search = () => {
		if (productRef.value) {
			productRef.value.reload();
		}
	};

	const closeSearch = () => {
		condition.value.keyword = '';
		keyword.value = '';
		if (productRef.value) {
			productRef.value.reload();
		}
	};

	const changeTab = (item, index) => {
		let val = tab.value[index].val;
		condition.value.sort = '';
		condition.value.filed = '';
		condition.value.new = '';
		tab.value.forEach((v) => {
			if (v.val) v.val = 'def';
		});
		condition.value.filed = tab.value[index].type;
		if (tab.value[index].type == 'new') {
			condition.value.new = 1;
		}
		switch (val) {
			case 'def':
				tab.value[index].val = 'asc';
				condition.value.sort = 'asc';
				break;
			case 'asc':
				tab.value[index].val = 'desc';
				condition.value.sort = 'desc';
				break;
			case 'desc':
				tab.value[index].val = 'def';
				condition.value.sort = '';
				condition.value.filed = '';
				break;
			default:
				condition.value.sort = '';
				break;
		}

		if (productRef.value) {
			productRef.value.reload();
		}
	};

	const topH = ref(15);
	const searchr = ref(15);
	onShow(() => {
		// #ifdef MP-WEIXIN
		const menuInfo = inject('menuButtonInfo');
		topH.value = menuInfo.top;
		searchr.value = menuInfo.width + 25;
		// #endif
	});
</script>

<style scoped lang="scss">
	::v-deep page {
		background-color: #f4f5f8 !important;
	}

	::v-deep .u-sticky {
		top: 0 !important;
	}

	.top-bg {
		position: fixed;
		top: 0;
		width: 100%;
		height: 739rpx;
		z-index: 2;
	}

	.big-title {
		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #000;
		}
		.more {
			font-weight: 400;
			font-size: 26rpx;
			color: #888888;
			> text {
				margin-left: 10rpx;
			}
		}
	}

	.fixed-top {
		background: #ffffff;
		.top {
			padding: 30rpx;
			.left-icon {
				margin-right: 19rpx;
			}
			.search {
				background: #f0f0f0;
				border-radius: 36rpx;
				padding: 6rpx;
				margin-left: 19rpx;
				.s-icon {
					width: 34rpx;
					height: 34rpx;
					margin-left: 12rpx;
				}

				.inp {
					font-weight: 400;
					font-size: 26rpx;
					margin-left: 29rpx;
				}
				.inp-place {
					color: #bdbdbd;
				}
				.search-icon {
					width: 120rpx;
					height: 56rpx;
					line-height: 56rpx;
					background: $theme-bg-btn-color;
					border-radius: 30rpx;
					font-weight: 500;
					font-size: 30rpx;
					color: #ffffff;
					text-align: center;
				}
				.close-icon {
					width: 35rpx;
					height: 34rpx;
					padding-right: 26rpx;
				}
			}
		}

		.fill {
			background: #ffffff;
			border-radius: 30rpx 30rpx 0rpx 0rpx;

			padding: 28rpx 30rpx;

			.sort-type {
				.item {
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					> text {
						margin-right: 8rpx;
					}
					.icon {
						width: 12rpx;
						height: 19rpx;
					}
				}
				.active {
					color: #fb3204;
				}
			}
		}
	}
</style>
